// 全局vuex的管理
import { login, getUserInfo, getUserDetailById } from '@/api/user' // 获取数据的接口
import { getToken, setToken, removeToken } from '@/utils/auth' // 管理Cookies里边的数据

export default {
  namespaced: true,
  state: {
    token: getToken() || '', // 初始值为空，刷新所有代码重置
    userInfo: {}
  },
  mutations: {
    // 原型链
    setToken(state, token) {
      // 存入vuex
      state.token = token
      // 存入cookie
      // 作用域链
      setToken(token)
      // 登录 -> token -> 存入cookie
      // 刷新 -> token初始化会执行  -> getToken
    },
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    },
    // 清空数据的方法，谁用谁调就行
    removeUserInfo(state) {
      // 清除vuex
      state.token = ''
      state.userInfo = {}
      // 清除本地Cookies里边的数据
      removeToken()
    }
  },
  actions: {
    async fetchLogin({ commit }, form) {
      // ctx.commit 提交mutation
      // ctx.dispatch 提交action
      // 1. 调用接口请求 登录
      const res = await login(form)
      // 2. 拿到请求返回值 提交mutation函数进行修改
      commit('setToken', res)
    },
    // {commit}将commit方法解构出来  再在permission文件最合适的位置调用
    async fetchGetUserInfo({ commit }) {
      // 问题:
      // 1. 后端多个接口对应前端的一个业务 组合数据
      // 2. 接口之间有前后的依赖关系 await可以保证串行的结构
      // 1. 发请求 2.调用mutations
      // console.log(res, 123)
      const res = await getUserInfo() // 拿到数据调后mutations
      // 插入一个头像信息请求
      // 串行用await相互有依赖分开await发送        并行用promis.all()包裹直接发相互没有依赖
      const res_ = await getUserDetailById(res.userId)
      // 2. 调用mutation [合并一下俩个接口的返回对象 成为一个对象] 两名字一样后面覆盖前面
      commit('setUserInfo', { ...res, ...res_ })
    }

  }
}
